<template>
	<notice :notice.sync="notice"></notice>
	<header-home :user.sync="user"></header-home>
	<div class="container-fluid" id="class-container">
        <div class="row">
            <div class="col-sm-3">
                <button class="btn btn-link add-class" id="add-class" data-toggle="modal" data-target="#join-class-modal">
                    <span class="glyphicon glyphicon-plus"></span> 加入班级
                </button>
            </div>
        </div>
        <div class="loading" v-if="loading">
    		<i class="fa fa-spinner fa-spin fa-3x"></i>
    	</div>
        <div class="row" v-if="!loading">
            <template v-if="classes.length>0">
            	<div class="col-lg-3 col-md-6" v-for="item in classes" track-by="cla_id">
    	            <class-item :class-item="item"
    	            			:index="$index"
                                :is-teacher="user.isTeacher"
                                @cancel-class="beforeCancel($index)">
    	            </class-item>
    	        </div>
            </template>
            <div class="col-md-6 col-md-offset-3 display-hint class-hint" v-else>
                <p>点击上方加入班级按钮加入班级</p>
            </div>
        </div>
    </div>
    <modal type="modal-lg" id="join-class-modal" class="join-class-modal">
    	<h4 class="modal-title" slot="header">加入班级</h4>
        <div slot="body">
            <div class="row">
                <div class="col-md-3 col-md-offset-9">
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control" placeholder="课程名、班级名或邀请码" v-model="keyword">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" @click="search">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row other-panels">
                <template v-for="cla in searchClass">
                    <div class="col-md-4" @click="cla.active=!cla.active">
                        <div class="panel panel-default">
                            <div class="panel-heading" :class="{'active': cla.active}">
                                <span class="glyphicon glyphicon-check"></span>
                                <h4>{{ cla.cla_name }}</h4>
                                <p>{{ cla.cou_name }}</p>
                                <p>{{ cla.tea_name }}</p>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    	<button slot="footer" type="button" class="btn btn-primary" @click="join" :disabled="keyword===''">加入</button>
    </modal>
    <modal type="modal-sm" id="cancel-class">
        <h4 slot="header" class="modal-title text-danger">退选课程</h4>
        <p slot="body">是否退选课程 '<span class="text-info">{{classes[cancelIndex]&&classes[cancelIndex].cla_name}}</span>' ?</p>
        <button slot="footer" type="button" class="btn btn-danger" @click="cancel()">确定</button>
    </modal>
</template>

<script>
	import HeaderHome from '../../Component/HeaderHome/HeaderHome';
	import Modal from '../../Component/Modal/Modal';
	import Notice from '../../Component/Notice/Notice';
	import ClassItem from '../../Component/ClassItem/ClassItem';

	export default {
		created: function() {
		    this.$http.get('/Class/Classes').then(function(resp) {
	            if (resp.data.status === 1) {
	                this.classes = resp.data.data;
	            }
	            this.loading = false;
		    }, function(resp) {
		        // error callback
		        this.notice = {type: 0, msg: resp.statusText};
		        this.loading = false;
		    })
		},
		data() {
			return {
				notice: {type: 0, msg: ''},
                user: {},
				classes: [],
				loading: true,
				keyword: '',
                searchClass: [],
                selectedClass: [],
                cancelIndex: -1
			}
		},
		components: {
			HeaderHome,
			Modal,
			Notice,
			ClassItem
		},
		methods: {
			create: function() {
				if (!this.$create.errors) {
                    this.$http.post('/Class/add', this.newClass).then(function(resp) {
                        if (resp.data.status === 1) {
                        	this.newClass.cla_id = resp.data.data.id;
                            this.newClass.cou_name = resp.data.data.cou_name;
                        	this.classes.splice(0, 0, this.newClass);
                            this.notice = {type: 1, msg: resp.data.message};
                            this.newClass = {cou_id: '-1', is_auto: '0'};
                            $("#add-class-modal").modal("toggle");
                        } else {
                        	this.notice = {type: 0, msg: resp.data.message};
                        }
            	    }, function(resp) {
            	        // error callback
            	        this.notice = {type: 0, msg: resp.statusText};
            	    })
                } else {
                    this.notice = {type: 0,msg: this.$create.errors[0].message};
                }
			},
            search: function () {
                if (this.keyword === '') return;
                this.$http.post('/class/stuSearch', {key: this.keyword}).then(function(resp) {
                    if (resp.data.status === 1) {
                        if (resp.data.data) {
                            resp.data.data.forEach((value) => {
                                value.active = false;
                            })
                            this.searchClass = resp.data.data;
                        } else {
                            this.searchClass = [];
                            this.notice = {type: 0, msg: '该班级没有试卷'};
                        }
                    } else {
                        this.notice = {type: 0, msg: resp.data.message};
                    }
                }, function(resp) {
                    // error callback
                    this.notice = {type: 0, msg: resp.statusText};
                })
            },
            join: function () {
                var claIds = this.searchClass.map((value) => {
                    if (value.active) {
                        return value.cla_id;
                    }
                })
                if (claIds.length === 0) {
                    this.notice = {type: 0, msg: '请选择想加入的班级'};
                    return;
                }
                this.$http.post('/classStudent/stuJoin', {cla_id: claIds}).then(function(resp) {
                    if (resp.data.status === 1) {
                        this.notice = {type: 1, msg: '提交申请成功'};
                        $('#join-class-modal').modal("toggle");
                    } else {
                        this.notice = {type: 0, msg: resp.data.message};
                    }
                }, function(resp) {
                    // error callback
                    this.notice = {type: 0, msg: resp.statusText};
                })
            },
            beforeCancel: function (index) {
                this.cancelIndex = index;
                $('#cancel-class').modal('toggle');
            },
            cancel: function () {
                this.$http.post('/classStudent/stuOut', {cla_id: this.classes[this.cancelIndex].cla_id}).then(function (resp) {
                    if (resp.data.status === 1) {
                        this.classes.splice(this.cancelIndex, 1);
                        this.notice = {type: 1, msg: '退选成功'};
                    } else {
                        this.notice = {type: 0, msg: resp.data.message};
                    }
                    $('#cancel-class').modal('toggle');
                })
            }
		},
		validators: {
			checkCourse: function(val) {
				return val !== '-1';
			},
			checkTime: function(val, target) {
				return val > target;
			}
		}
	}
</script>

<style>
#class-container {
	margin: 0 100px 0 40px;
}

#class-container .row {
	margin-bottom: 10px
}

button#add-class {
	color: #515151;
	font-size: 16px
}

button#add-class:hover {
	opacity: 0.6;
	text-decoration: none;
}

button#add-class:focus {
	outline: 0;
	text-decoration: none;
}

.file-class-modal .panel .panel-title {
    display:inline-block; 
    margin-bottom:10px;
    font-size:18px;
    width: auto;
}

.file-class-modal .modal-body {
    height:300px;
    overflow-y: auto;
    padding: 10px 60px 40px 60px;
}

.file-class-modal .row {
    margin-top: 10px;
}
.join-class-modal {
    z-index: 1099;
}

.join-class-modal .other-panels {
    padding-top: 15px;
}

.join-class-modal .modal-body {
    height: 310px;
    overflow-y: auto;
}

.join-class-modal .panel .panel-heading {
    border: 1px solid transparent;
    min-height: 94px;
    cursor: pointer
}

.join-class-modal .panel-heading:hover {
    color: #123456;
    opacity: 0.6;
}

.join-class-modal .panel-heading span {
    position: absolute;
    top: 6px;
    right: 20px;
    display: none;
    margin-bottom: -5px;
}

.join-class-modal .panel-heading:hover span {
    display: block;
}

.join-class-modal .panel .panel-heading.active span {
    display: block;
    color: #18bc9c;
}

.join-class-modal .panel .panel-heading.active {
    border-color: #18bc9c;
}
</style>